<template>
    <div class="chart-com">
        <header class="title">
            <span class="icon-title">固定场所巡查统计</span>
            <el-date-picker popper-class="home-datepicker" type="month" v-model="selectDate" :clearable="false" placeholder="月份" format="yyyy-MM" value-format="yyyy-MM"  @change="getChartData"></el-date-picker>
            <i class="iconfont icon-more" title="更多" v-show="false"></i>
        </header>
        <section class="chart" ref="chart"></section>
		<i class="corner top-left"></i>
		<i class="corner top-right"></i>
		<i class="corner bottom-left"></i>
		<i class="corner bottom-right"></i>
    </div>
</template>
<script>
import echarts from 'echarts'
import themeShine from '@/assets/lib/echarts/theme-shine.json'
import themeHalloween from '@/assets/lib/echarts/theme-halloween.json'
export default {
    data(){
        return{
            chartObj:null,
            selectDate:'',
            //柱状-其他
            chartOption:{
                title : {
                    // text: '灞河',
                    subtext: '',
                    x:'right',
                    itemGap:5,
                    textStyle:{
                        fontSize:14,
                    }
                },
                legend: {
                    type:'scroll',
                    data:['已上报','已处理','已结束'],
                    textStyle:{
                        fontSize:10,
                    },
					top:'0',
                    left:'center',
                    itemWidth:13,
                    itemHeight:8,
                    pageIconSize:12,
                },
                //color: ['#0bab03','#00caf7', '#e2dc19', '#fcc7ae' ],//调色盘
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {     // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                  //  formatter: "{c} mg/L"
                },
                grid: {
                    top:'40',
                    left: '10',
                    right: '10',
                    bottom: '0',
                    containLabel: true
                },
                xAxis : {
                    type : 'category',
                    data : ['已上报','处理中','已处理','已结束'],
                    axisLine:{
                        lineStyle:{color:'#12e1ed'}
                    },
                    axisTick:{
                        alignWithLabel: true,
                        lineStyle:{color:'#12e1ed'}
                    },
                    axisLabel:{
                        textStyle:{color:'#fff'},
						interval:0
                    },
                },
                yAxis : {
                    type : 'value',
                    axisLine:{
                        lineStyle:{color:'#12e1ed'}
                    },
                    axisTick:{
                        alignWithLabel: true,
                        lineStyle:{color:'#12e1ed'}
                    },
                    axisLabel:{
                        textStyle:{color:'#fff'}
                    },
                },
				// dataset:{
				// 	source: [
				// 		[0.5, 0.3, 0.3, 0.35],
				// 		[0.35,0.5, 0.3, 0.45],
				// 		[ 0.3, 0.35,0.5,0.4],
				// 		[ 0.35, 0.30,0.45,0.47],
				// 		[ 0.25, 0.20,0.40,0.45]
				// 	]
				// },
                series : [
                    {
                        type:'bar',
						barWidth: 30,
                        data:[83.1, 73.4, 55.1,25],
						itemStyle: {
						    normal: {
						        color: new echarts.graphic.LinearGradient(
						            0, 0, 0, 1,
						            [
						                { offset: 0, color: '#0cb0fb' },                   //柱图渐变色
						                { offset: 0.5, color: '#08cff1' },                 //柱图渐变色
						                { offset: 1, color: '#01fce3' },                   //柱图渐变色
						            ]
						        )
						    },
						},
						label: {
						    show: true,
						    position: 'top',
						    textStyle: {
						        color: '#fff',
						        fontSize:10
						    }
						},
						emphasis:{
							label:{
								show:false
							}
						}
                    }
                ]
            },
        }
    },
    methods:{
		initDate(){
		    var date=new Date()
		    var year=date.getFullYear()
		    var month=date.getMonth()+1
		    var date=date.getDate()
		    if(month<10){
		        month="0"+month
		    }
		    this.selectDate=year+"-"+month
		},
       
        getChartData(){
            this.$http.getChartData_daolu({yearMonth:this.selectDate,type:'gudingchangsuo'})
			.then((res)=>{
				var data=res.data.data;
				var submitCount=data.submitCount;
				var inHandCount =data.inHandCount ;
				var processCount=data.processCount;
				var finishCount=data.finishCount;
				var series=[submitCount,inHandCount,processCount,finishCount]
				this.renderChart(series)
			}).catch((err)=>{
				throw(err)
			})
        },
		
		renderChart(data){
			var myChart=null;
			var option=null;
			if(!this.chartObj){
				echarts.registerTheme('shine', themeHalloween)
				myChart = echarts.init(this.$refs.chart,'shine');
				this.chartObj=myChart
				option=this.chartOption
			}else{
				myChart=this.chartObj
				option=this.chartObj.getOption()
			}
			option.series[0].data=data;
			myChart.setOption(option)
		},
        

    },
    created(){
      this.initDate()
    },
    mounted(){
       this.getChartData()
    }
}
</script>
<style lang="scss" scoped>
.chart-com{
    width: 100%;
    height: 100%;
	min-width:200px;
	min-height:200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
	background-color: #01183F;
	box-shadow: 0px 0px 10px 1px #2977A4 inset;
	position: relative;
	padding: 10px;
	box-sizing: border-box;
    .title{
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        text-indent: 1em;
        text-shadow: 0px 0px 3px #3400db;
        color: #11e0ec;
        cursor: default;
		display: flex;
		justify-content: space-between;
        .icon-title{
			&::before{
				content: '';
				display: inline-block;
				width: 4px;
				height: 4px;
				border-radius: 50%;
				box-shadow: 0px 0px 5px 1px #98e7ff;
				margin-right: 10px;
				vertical-align: middle;
				background-color: #2e9fc1;
			}
        }
    
    }
    .chart{
        flex: 1;
        //overflow:hidden;
        position: relative;
    }
}

/deep/ .el-date-editor.el-input{
    width:73px;
    z-index: 1;
    margin-left: 10px;
    .el-input__inner{
        height:25px;
        line-height:25px;
        background-color:transparent;
        color:#fff;
        border:1px solid #0042b1;
        font-size:12px;
        padding: 0px 20px;
        padding-right: 0px;
        margin-left: -15px;
    }
    .el-input__prefix{
        left:-25px;
        top: 2px;
    }
	.el-input__suffix{
		display: none;
	}
    .el-input__icon{
        line-height:30px;
    }
}

.corner{
	display: block;
	width:50px;
	height:50px;
	background: url(~@/assets/images/home/border.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	&.top-left{
		top:0;
		left: 0;
	}
	&.top-right{
		top:0;
		right: 0;
		transform: rotateY(180deg);
	}
	&.bottom-left{
		bottom:0;
		left: 0;
		transform: rotateX(180deg);
	}
	&.bottom-right{
		right:0;
		bottom: 0;
		transform: rotateZ(180deg);
	}
}

</style>

